import React from 'react';
import { Modal, Table, message } from 'antd';

export default class DetailModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedRows: [], selectedRowKeys: [] };
  }

  // 提交选择的发票或者邮寄地址数据
  saveTitleOrAddr = () => {
    const { saveTitleOrAddr = () => {}, handleModalVisible } = this.props;
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      saveTitleOrAddr(selectedRows);
      handleModalVisible(false);
    } else {
      message.warning('最少选择一项');
    }
  };

  afterClose = () => {
    this.setState({
      selectedRows: [],
      selectedRowKeys: [],
    });
  };

  render() {
    const {
      modalVisible,
      handleModalVisible,
      loading,
      dataSource = [],
      titleAddrType = '1',
    } = this.props;
    const { selectedRows, selectedRowKeys } = this.state;
    const columnsTitle = [
      {
        title: '单位名称',
        dataIndex: 'holderName',
      },
      {
        title: '纳税人识别号',
        dataIndex: 'taxerIdNo',
      },
      {
        title: '单位地址',
        dataIndex: 'holderAddrs',
      },
      {
        title: '电话',
        dataIndex: 'phone',
      },
      {
        title: '开户行',
        dataIndex: 'bankOfDepoName',
      },
      {
        title: '银行账号',
        dataIndex: 'bankAcco',
      },
    ];

    const columnsAddr = [
      {
        title: '收件人',
        dataIndex: 'contPerName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '联系人电话',
        dataIndex: 'contPerPhone',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '邮寄地址',
        dataIndex: 'mailArea',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '详细地址',
        dataIndex: 'mailAddr',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    return (
      <Modal
        width={1200}
        title={`选择发票${titleAddrType === '1' ? '抬头' : '邮寄地址'}`}
        visible={modalVisible}
        onOk={this.saveTitleOrAddr}
        onCancel={() => handleModalVisible(false)}
        destroyOnClose
        afterClose={this.afterClose}
      >
        <Table
          selectedRows={selectedRows}
          loading={loading}
          dataSource={dataSource}
          rowKey={titleAddrType === '1' ? 'invId' : 'mailAddrId'}
          columns={titleAddrType === '1' ? columnsTitle : columnsAddr}
          rowSelection={{
            type: 'radio',
            selectedRowKeys,
            onChange: (selectedKeys, selectRows) => {
              this.setState({ selectedRowKeys: selectedKeys, selectedRows: selectRows });
            },
          }}
          pagination={false}
          onRow={record => ({
            onClick: e => {
              e.stopPropagation();
              e.currentTarget.getElementsByClassName('ant-radio-wrapper')[0].click();
              this.setState({
                selectedRows: [record],
                selectedRowKeys: titleAddrType === '1' ? [record.invId] : [record.mailAddrId],
              });
            },
          })}
        />
      </Modal>
    );
  }
}
